<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>TOP 5000 电影数据分析</title>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body {
            font-family: 'Ubuntu Condensed';
            height: 100%;
            margin: 0;
            color: rgba(0, 0, 0, 0.85);
        }
    </style>
</head>

<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight;</script>
<script src="../static/g2.min.js"></script>
<script src="../static/data-set.min.js"></script>
<script src="../static/jquery-3.2.1.min.js"></script>
<script>
    function generateChart(id, type, xkey, xlabel, ykey, ylabel) {
        var chart = new G2.Chart({
            container: id,
            forceFit: true,
            height: 500,
            padding: [40, 80, 80, 80],
        });
        chart.scale(ykey, {
            alias: ylabel,
            min: 0,
            // max: 3000,
            tickCount: 4
        });

        chart.axis(xkey, {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            },
            tickLine: {
                alignWithLabel: false,
                length: 0
            }
        });

        chart.axis(ykey, {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            },
            title: {
                offset: 50
            }
        });
        chart.legend({
            position: 'top-center'
        });
        chart.interval().position(`${xkey}*${ykey}`).label(ykey).color('#ffb877').opacity(1).adjust([{
            type,
            marginRatio: 1 / 32
        }]);
        chart.render();

        return chart;
    }
</script>
<script>
    // id: 表示图表要渲染到的 HTML 元素的 ID，这里是 'mountNode'。
    // type: 表示柱状图的类型，这里是 'dodge'，表示柱子会并列显示。
    // xkey: 表示 X 轴对应的数据字段，这里是 'house_type'，表示房屋类型。
    // xlabel: 表示 X 轴的标签，这里是 'House_types'，表示房屋类型。
    // ykey: 表示 Y 轴对应的数据字段，这里是 'count'，表示每个房屋类型对应的电影数量。
    // ylabel: 表示 Y 轴的标签，这里是 '# rent'，表示租房类型数量。
    let chart = generateChart('mountNode', 'dodge', 'house_type', 'House_types', 'count', '# 租房数量');

    window.onload = () => {
        $.getJSON("../static/house_type.json", d => {
            chart.changeData(d)
        })
    }
</script>
</body>

</html>